<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>
<script>
    const request = window.indexedDB.open('maopp', 1);
    let db = null;

    request.onerror = function (event) {
        console.log('数据库打开报错');
    };

    request.onsuccess = function (event) {
        db = request.result;
    };

    request.onupgradeneeded = function (event) {
        db = event.target.result;
            const objectStore = db.createObjectStore('user',
                {
                    keyPath: 'name',
                });
            objectStore.createIndex('name', 'name', {unique: false});
            objectStore.createIndex('avatar', 'avatar', {unique: false});
            objectStore.createIndex('age', 'age', {unique: false});
            objectStore.createIndex('sex', 'sex', {unique: false});
            objectStore.createIndex('email', 'email', {unique: true});
            objectStore.createIndex('birth_date', 'birth_date', {unique: false});
            objectStore.createIndex('create_time', 'create_time', {unique: false});
            objectStore.createIndex('remarks', 'remarks', {unique: false});
    }

    function add() {
        const request = db.transaction(['user'], 'readwrite')
            .objectStore('user')
            .add({ id: 1, name: '张三', avatar: 'zhangsan@example.com', age: 24, sex: 0, email: 'zhangsan@example.com' });

        request.onsuccess = function (event) {
            console.log('数据写入成功');
        };

        request.onerror = function (event) {
            console.log('数据写入失败');
        }
    }

    function read() {
        const transaction = db.transaction(['user']);
        const objectStore = transaction.objectStore('user');
        const request = objectStore.get(1);

        request.onerror = function(event) {
            console.log('事务失败');
        };

        request.onsuccess = function( event) {
            if (request.result) {
                console.log('Name: ' + request.result.name);
                console.log('Age: ' + request.result.age);
                console.log('Email: ' + request.result.email);
            } else {
                console.log('未获得数据记录');
            }
        };
    }

    function readAll() {
        const objectStore = db.transaction('user').objectStore('user');

        objectStore.openCursor().onsuccess = function (event) {
            const cursor = event.target.result;

            if (cursor) {
                console.log('Id: ' + cursor.key);
                console.log('Name: ' + cursor.value.name);
                console.log('Age: ' + cursor.value.age);
                console.log('Email: ' + cursor.value.email);
                cursor.continue();
            } else {
                console.log('没有更多数据了！');
            }
        };
    }

    function update() {
        const request = db.transaction(['user'], 'readwrite')
            .objectStore('user')
            .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

        request.onsuccess = function (event) {
            console.log('数据更新成功');
        };

        request.onerror = function (event) {
            console.log('数据更新失败');
        }
    }

    function remove() {
        var request = db.transaction(['user'], 'readwrite')
            .objectStore('user')
            .delete(1);

        request.onsuccess = function (event) {
            console.log('数据删除成功');
        };
    }

    // var transaction = db.transaction(['user'], 'readonly');
    // var store = transaction.objectStore('user');
    // var index = store.index('name');
    // var request = index.get('李四');
    // request.onsuccess = function (e) {
    //     var result = e.target.result;
    //     if (result) {
    //     } else {
    //     }
    // }

    // var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    // db.transaction(function (tx) {
    //     tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    //     tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [1, 'silence']);
    // });
</script>